<template>
   <!-- 表单 -->
      <el-form ref="form" :model="form" label-width="80px" :inline="true">
        <el-form-item label="学科">
          <el-select v-model="form.subjectID" placeholder="请选择"  @change="handleSubject">
            <el-option
              v-for="item in list.subjectList"
              :key="item.id"
              :label="item.subjectName"
              :value="item.subjectID"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="二级目录">
          <el-select v-model="form.catalogID" placeholder="请选择">
            <el-option
              v-for="(item,index) in list.secondaryDirectory"
              :key="index"
               :label="item.label"
              :value="item.catalogID"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="标签">
          <el-select v-model="form.tags" placeholder="请选择">
            <el-option
              v-for="(item, index) in list.tagsList"
              :key="index"
              :label="item.label"
              :value="item.label"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="关键字">
          <el-input v-model="form.keyword" value="keyword" style="width:220px"></el-input>
        </el-form-item>
        <el-form-item label="试题类型">
          <el-select v-model="form.questionType" placeholder="请选择">
            <el-option
              v-for="(item, index) in questionTypeList"
              :key="index"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="难度">
          <el-select v-model="form.difficulty" placeholder="请选择">
            <el-option
              v-for="(item, index) in difficultyList"
              :key="index"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="方向">
          <el-select v-model="form.direction" placeholder="请选择">
            <el-option
              v-for="(item, index) in directionList"
              :key="index"
              :label="item"
              :value="item"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="录入人">
          <el-select v-model="form.creatorID" placeholder="请选择">
            <el-option
              v-for="item in tableData"
              :key="item.id"
              :label="item.creator"
              :value="item.creatorID"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="题目类型">
          <el-input v-model="form.remarks" value="remarks" style="width:220px"></el-input>
        </el-form-item>
        <el-form-item label="企业简称">
          <el-input v-model="form.shortName" value="shortName" style="width:223px"></el-input>
        </el-form-item>
        <el-form-item label="城市">
          <el-select
            v-model="form.province"
            placeholder="请选择"
            @keyup.enter="handleFilter"
            @change="handleProvince"
            filterable
            style="width: 110px"
          >
            <el-option
              v-for="item in cityList.province"
              :key="item"
              :label="item"
              :value="item"
            ></el-option>
          </el-select>
          <el-select
            class="filter-item"
            style="width: 110px"
            v-model="form.city"
            @keyup.enter="handleFilter"
            filterable>
            <el-option
              v-for="item in cityList.cityDate"
              :key="item"
              :label="item"
              :value="item"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item style="margin-left:154px">
          <el-button @click="emptyFn">清除</el-button>
          <el-button type="primary" @click="searchFn()">搜索</el-button>
        </el-form-item>
      </el-form>
</template>

<script>
import { provinces, citys } from '../../../api/hmmm/citys'
import { simple } from '../../../api/hmmm/tags'
// import { } from '../../../api/hmmm/subjects'
import { list, simple as simpleTags } from '../../../api/hmmm/directorys'
import {
  difficulty,
  questionType,
  direction
} from '../../../api/hmmm/constants'
export default {
  props: {
    tableData: {
      type: Array,
      required: true
    }
  },
  data () {
    return {
      form: {
        subjectID: '', // 学科
        catalogID: '', // 二级目录
        tags: '', // 标签
        keyword: '', // 关键字
        questionType: '', // 试题类型
        difficulty: '', // 难度
        direction: '', // 方向
        creatorID: '', // 录入人
        city: '', // 城市
        shortName: '', //  企业简称
        remarks: '', // 题目类型
        province: '' // 省份
      },
      id: 0, // 学科的id
      difficultyList: difficulty, // 试题难度
      questionTypeList: questionType, // 试题类
      directionList: direction, // 方向
      cityList: { // 关于城市下拉框的数据
        province: [],
        cityDate: []
      },
      list: {
        subjectList: [], // 学科列表
        secondaryDirectory: [], // 二级目录
        tagsList: [] // 标签列表
      }
    }
  },
  created () {
    this.getCityDate()
    this.getList()
  },
  methods: {
    // 获取到市
    getCityDate () {
      this.cityList.province = provinces()
    },
    // 选市获取到地区
    handleProvince: function (e) {
      this.cityList.cityDate = citys(e)
      this.form.city = this.cityList.cityDate[0]
    },
    // 获取学科列表
    async getList () {
      try {
        const res = await list()
        console.log('学科列表', res)
        this.list.subjectList = res.data.items
      } catch (error) {
        this.$message.error(error.message)
      }
    },
    // // 通过学科的改变获取到学科的学科ID
    handleSubject (e) {
      // 当获取到学科的ID之后调用这个两个方法,获取二级目录和标签列表
      this.getTagsList(e)
      this.getSimple(e)
      console.log(e)
    },
    // 获取二级目录列表
    async getTagsList (id) {
      // try {
      //   const res = await list({
      //     subjectID: id
      //   })
      //   console.log('二级目录列表', res)
      //   this.list.secondaryDirectory = res.data.items
      // } catch (error) {
      //   this.$message.error(error.message)
      // }
      try {
        // 请求标签列表的数据
        const res = await simpleTags({
          subjectID: id
        })
        console.log('二级目录', res)
        // 赋值
        this.list.secondaryDirectory = res.data
      } catch (error) {
        this.$message.error(error.message)
      }
    },
    // 获取标签列表
    async getSimple (id) {
      try {
        const res = await simple({
          subjectID: id
        })
        console.log('标签列表', res)
        // 给二级目录的数组赋值
        this.list.tagsList = res.data
      } catch (error) {
        this.$message.error(error.message)
      }
    },
    // 搜索按钮
    async searchFn () {
      this.$emit('searchFn', this.form)
    },
    // 取消按钮,清空表单
    emptyFn () {
      this.form = {
        subjectID: '', // 学科
        catalogID: '', // 二级目录
        tags: '', // 标签
        keyword: '', // 关键字
        questionType: '', // 试题类型
        difficulty: '', // 难度
        direction: '', // 方向
        creatorID: '', // 录入人
        city: '', // 城市
        shortName: '', //  企业简称
        remarks: '', // 题目类型
        province: '' // 省份
      }
      this.$emit('empty')
    }
  }
}
</script>

<style>

</style>
